<!DOCTYPE html>
<html>
<head>
    <title>交互式绘图板</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f2f5;
            overflow: hidden;
        }
        
        .drawing-app {
            display: flex;
            height: 100vh;
        }
        
        .toolbar {
            width: 250px;
            background: white;
            border-right: 1px solid #e1e5e9;
            padding: 20px;
            overflow-y: auto;
        }
        
        .toolbar h3 {
            margin-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 5px;
        }
        
        .tool-group {
            margin-bottom: 20px;
        }
        
        .tool-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #555;
        }
        
        .tool-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .tool-btn {
            padding: 10px;
            border: 2px solid #e1e5e9;
            background: white;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            font-size: 14px;
        }
        
        .tool-btn:hover {
            border-color: #667eea;
            background: #f8f9ff;
        }
        
        .tool-btn.active {
            border-color: #667eea;
            background: #667eea;
            color: white;
        }
        
        .color-palette {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 5px;
            margin-bottom: 15px;
        }
        
        .color-btn {
            width: 30px;
            height: 30px;
            border: 2px solid #ddd;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        
        .color-btn:hover {
            transform: scale(1.1);
        }
        
        .color-btn.active {
            border-color: #333;
            transform: scale(1.2);
        }
        
        .slider-group {
            margin-bottom: 15px;
        }
        
        .slider {
            width: 100%;
            margin: 10px 0;
        }
        
        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .action-btn {
            padding: 12px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .action-btn.primary {
            background: #667eea;
            color: white;
        }
        
        .action-btn.secondary {
            background: #6c757d;
            color: white;
        }
        
        .action-btn.danger {
            background: #e74c3c;
            color: white;
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        
        .canvas-container {
            flex: 1;
            position: relative;
            background: white;
            margin: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .canvas {
            display: block;
            cursor: crosshair;
        }
        
        .canvas.eraser {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="20" height="20" fill="%23ff6b6b" rx="2"/></svg>') 10 10, auto;
        }
        
        .status-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
        }
        
        .shortcuts-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255,255,255,0.95);
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            font-size: 12px;
            max-width: 200px;
        }
        
        .shortcuts-panel h4 {
            margin-bottom: 10px;
            color: #333;
        }
        
        .shortcut-item {
            display: flex;
            justify-content: space-between;
            margin: 5px 0;
        }
        
        .shortcut-key {
            background: #e1e5e9;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="drawing-app">
            <!-- 工具栏 -->
            <div class="toolbar">
                <h3>🎨 绘图工具</h3>
                
                <!-- 绘制工具 -->
                <div class="tool-group">
                    <label>绘制工具</label>
                    <div class="tool-buttons">
                        <button 
                            v-for="tool in tools" 
                            :key="tool.name"
                            :class="['tool-btn', { active: currentTool === tool.name }]"
                            @click="setTool(tool.name)"
                        >
                            {{ tool.icon }} {{ tool.label }}
                        </button>
                    </div>
                </div>
                
                <!-- 颜色选择 -->
                <div class="tool-group">
                    <label>颜色选择</label>
                    <div class="color-palette">
                        <button 
                            v-for="color in colors" 
                            :key="color"
                            :class="['color-btn', { active: currentColor === color }]"
                            :style="{ backgroundColor: color }"
                            @click="setColor(color)"
                        ></button>
                    </div>
                    <input 
                        type="color" 
                        v-model="currentColor" 
                        @change="setColor($event.target.value)"
                        style="width: 100%; height: 40px; border: none; border-radius: 5px;"
                    >
                </div>
                
                <!-- 画笔设置 -->
                <div class="tool-group">
                    <div class="slider-group">
                        <label>画笔大小: {{ brushSize }}px</label>
                        <input 
                            type="range" 
                            v-model="brushSize" 
                            min="1" 
                            max="50" 
                            class="slider"
                        >
                    </div>
                    
                    <div class="slider-group">
                        <label>透明度: {{ Math.round(opacity * 100) }}%</label>
                        <input 
                            type="range" 
                            v-model="opacity" 
                            min="0.1" 
                            max="1" 
                            step="0.1" 
                            class="slider"
                        >
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="tool-group">
                    <label>操作</label>
                    <div class="action-buttons">
                        <button 
                            class="action-btn secondary"
                            @click="undo"
                            :disabled="!canUndo"
                        >
                            ↶ 撤销 (Ctrl+Z)
                        </button>
                        <button 
                            class="action-btn secondary"
                            @click="redo"
                            :disabled="!canRedo"
                        >
                            ↷ 重做 (Ctrl+Y)
                        </button>
                        <button 
                            class="action-btn primary"
                            @click="saveImage"
                        >
                            💾 保存 (Ctrl+S)
                        </button>
                        <button 
                            class="action-btn danger"
                            @click="clearCanvas"
                        >
                            🗑️ 清空 (Ctrl+Delete)
                        </button>
                    </div>
                </div>
                
                <!-- 统计信息 -->
                <div class="tool-group">
                    <label>统计信息</label>
                    <div style="font-size: 14px; color: #666;">
                        <div>笔画数: {{ strokeCount }}</div>
                        <div>操作数: {{ historyIndex + 1 }}/{{ history.length }}</div>
                        <div>画布大小: {{ canvasWidth }}×{{ canvasHeight }}</div>
                    </div>
                </div>
            </div>
            
            <!-- 画布区域 -->
            <div class="canvas-container">
                <canvas 
                    ref="canvas"
                    :class="['canvas', { eraser: currentTool === 'eraser' }]"
                    :width="canvasWidth"
                    :height="canvasHeight"
                    @mousedown.prevent="startDrawing"
                    @mousemove.prevent="draw"
                    @mouseup.prevent="stopDrawing"
                    @mouseleave.prevent="stopDrawing"
                    @contextmenu.prevent="showContextMenu"
                    @keydown="handleKeyboard"
                    tabindex="0"
                ></canvas>
                
                <!-- 状态栏 -->
                <div class="status-bar">
                    <div>
                        工具: {{ getCurrentToolLabel() }} | 
                        颜色: {{ currentColor }} | 
                        大小: {{ brushSize }}px
                    </div>
                    <div>
                        坐标: ({{ mouseX }}, {{ mouseY }}) | 
                        {{ isDrawing ? '绘制中' : '就绪' }}
                    </div>
                </div>
                
                <!-- 快捷键面板 -->
                <div class="shortcuts-panel">
                    <h4>⌨️ 快捷键</h4>
                    <div class="shortcut-item">
                        <span>画笔</span>
                        <span class="shortcut-key">B</span>
                    </div>
                    <div class="shortcut-item">
                        <span>橡皮</span>
                        <span class="shortcut-key">E</span>
                    </div>
                    <div class="shortcut-item">
                        <span>直线</span>
                        <span class="shortcut-key">L</span>
                    </div>
                    <div class="shortcut-item">
                        <span>矩形</span>
                        <span class="shortcut-key">R</span>
                    </div>
                    <div class="shortcut-item">
                        <span>圆形</span>
                        <span class="shortcut-key">C</span>
                    </div>
                    <div class="shortcut-item">
                        <span>撤销</span>
                        <span class="shortcut-key">Ctrl+Z</span>
                    </div>
                    <div class="shortcut-item">
                        <span>重做</span>
                        <span class="shortcut-key">Ctrl+Y</span>
                    </div>
                    <div class="shortcut-item">
                        <span>保存</span>
                        <span class="shortcut-key">Ctrl+S</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, reactive, computed, onMounted, nextTick } = Vue;
        
        createApp({
            setup() {
                // 画布引用
                const canvas = ref(null);
                let ctx = null;
                
                // 绘制状态
                const isDrawing = ref(false);
                const currentTool = ref('brush');
                const currentColor = ref('#000000');
                const brushSize = ref(5);
                const opacity = ref(1);
                const mouseX = ref(0);
                const mouseY = ref(0);
                const strokeCount = ref(0);
                
                // 画布尺寸
                const canvasWidth = ref(800);
                const canvasHeight = ref(600);
                
                // 历史记录
                const history = ref([]);
                const historyIndex = ref(-1);
                
                // 绘制数据
                let startX = 0;
                let startY = 0;
                let lastX = 0;
                let lastY = 0;
                
                // 工具定义
                const tools = [
                    { name: 'brush', label: '画笔', icon: '🖌️' },
                    { name: 'eraser', label: '橡皮', icon: '🧽' },
                    { name: 'line', label: '直线', icon: '📏' },
                    { name: 'rectangle', label: '矩形', icon: '⬜' },
                    { name: 'circle', label: '圆形', icon: '⭕' },
                    { name: 'text', label: '文字', icon: '📝' }
                ];
                
                // 颜色调色板
                const colors = [
                    '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00',
                    '#ff00ff', '#00ffff', '#800000', '#008000', '#000080', '#808000',
                    '#800080', '#008080', '#c0c0c0', '#808080', '#ff9999', '#99ff99'
                ];
                
                // 计算属性
                const canUndo = computed(() => historyIndex.value > 0);
                const canRedo = computed(() => historyIndex.value < history.value.length - 1);
                
                // 获取当前工具标签
                const getCurrentToolLabel = () => {
                    const tool = tools.find(t => t.name === currentTool.value);
                    return tool ? tool.label : '未知';
                };
                
                // 设置工具
                const setTool = (toolName) => {
                    currentTool.value = toolName;
                };
                
                // 设置颜色
                const setColor = (color) => {
                    currentColor.value = color;
                };
                
                // 保存画布状态
                const saveState = () => {
                    const imageData = ctx.getImageData(0, 0, canvasWidth.value, canvasHeight.value);
                    historyIndex.value++;
                    history.value = history.value.slice(0, historyIndex.value);
                    history.value.push(imageData);
                };
                
                // 开始绘制
                const startDrawing = (event) => {
                    isDrawing.value = true;
                    const rect = canvas.value.getBoundingClientRect();
                    startX = event.clientX - rect.left;
                    startY = event.clientY - rect.top;
                    lastX = startX;
                    lastY = startY;
                    
                    updateMousePosition(event);
                    
                    if (currentTool.value === 'brush' || currentTool.value === 'eraser') {
                        ctx.beginPath();
                        ctx.moveTo(startX, startY);
                    }
                };
                
                // 绘制过程
                const draw = (event) => {
                    updateMousePosition(event);
                    
                    if (!isDrawing.value) return;
                    
                    const rect = canvas.value.getBoundingClientRect();
                    const currentX = event.clientX - rect.left;
                    const currentY = event.clientY - rect.top;
                    
                    ctx.globalAlpha = opacity.value;
                    ctx.lineWidth = brushSize.value;
                    ctx.lineCap = 'round';
                    ctx.lineJoin = 'round';
                    
                    switch (currentTool.value) {
                        case 'brush':
                            ctx.globalCompositeOperation = 'source-over';
                            ctx.strokeStyle = currentColor.value;
                            ctx.lineTo(currentX, currentY);
                            ctx.stroke();
                            break;
                            
                        case 'eraser':
                            ctx.globalCompositeOperation = 'destination-out';
                            ctx.lineTo(currentX, currentY);
                            ctx.stroke();
                            break;
                    }
                    
                    lastX = currentX;
                    lastY = currentY;
                };
                
                // 结束绘制
                const stopDrawing = (event) => {
                    if (!isDrawing.value) return;
                    
                    const rect = canvas.value.getBoundingClientRect();
                    const endX = event.clientX - rect.left;
                    const endY = event.clientY - rect.top;
                    
                    ctx.globalAlpha = opacity.value;
                    ctx.lineWidth = brushSize.value;
                    ctx.strokeStyle = currentColor.value;
                    ctx.globalCompositeOperation = 'source-over';
                    
                    switch (currentTool.value) {
                        case 'line':
                            ctx.beginPath();
                            ctx.moveTo(startX, startY);
                            ctx.lineTo(endX, endY);
                            ctx.stroke();
                            break;
                            
                        case 'rectangle':
                            ctx.beginPath();
                            ctx.rect(startX, startY, endX - startX, endY - startY);
                            ctx.stroke();
                            break;
                            
                        case 'circle':
                            const radius = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
                            ctx.beginPath();
                            ctx.arc(startX, startY, radius, 0, 2 * Math.PI);
                            ctx.stroke();
                            break;
                    }
                    
                    isDrawing.value = false;
                    strokeCount.value++;
                    saveState();
                };
                
                // 更新鼠标位置
                const updateMousePosition = (event) => {
                    const rect = canvas.value.getBoundingClientRect();
                    mouseX.value = Math.round(event.clientX - rect.left);
                    mouseY.value = Math.round(event.clientY - rect.top);
                };
                
                // 撤销
                const undo = () => {
                    if (canUndo.value) {
                        historyIndex.value--;
                        const imageData = history.value[historyIndex.value];
                        ctx.putImageData(imageData, 0, 0);
                    }
                };
                
                // 重做
                const redo = () => {
                    if (canRedo.value) {
                        historyIndex.value++;
                        const imageData = history.value[historyIndex.value];
                        ctx.putImageData(imageData, 0, 0);
                    }
                };
                
                // 清空画布
                const clearCanvas = () => {
                    ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value);
                    strokeCount.value = 0;
                    saveState();
                };
                
                // 保存图片
                const saveImage = () => {
                    const link = document.createElement('a');
                    link.download = `drawing_${Date.now()}.png`;
                    link.href = canvas.value.toDataURL();
                    link.click();
                };
                
                // 显示右键菜单
                const showContextMenu = (event) => {
                    // 这里可以实现自定义右键菜单
                    console.log('右键菜单', event);
                };
                
                // 键盘事件处理
                const handleKeyboard = (event) => {
                    // 工具快捷键
                    switch (event.key.toLowerCase()) {
                        case 'b':
                            setTool('brush');
                            break;
                        case 'e':
                            setTool('eraser');
                            break;
                        case 'l':
                            setTool('line');
                            break;
                        case 'r':
                            setTool('rectangle');
                            break;
                        case 'c':
                            setTool('circle');
                            break;
                    }
                    
                    // 组合键
                    if (event.ctrlKey) {
                        switch (event.key.toLowerCase()) {
                            case 'z':
                                event.preventDefault();
                                undo();
                                break;
                            case 'y':
                                event.preventDefault();
                                redo();
                                break;
                            case 's':
                                event.preventDefault();
                                saveImage();
                                break;
                            case 'delete':
                                event.preventDefault();
                                clearCanvas();
                                break;
                        }
                    }
                };
                
                // 初始化
                onMounted(() => {
                    ctx = canvas.value.getContext('2d');
                    
                    // 设置画布尺寸
                    const container = canvas.value.parentElement;
                    canvasWidth.value = container.clientWidth - 40;
                    canvasHeight.value = container.clientHeight - 60;
                    
                    // 保存初始状态
                    saveState();
                    
                    // 添加全局键盘监听
                    document.addEventListener('keydown', handleKeyboard);
                });
                
                return {
                    canvas,
                    isDrawing,
                    currentTool,
                    currentColor,
                    brushSize,
                    opacity,
                    mouseX,
                    mouseY,
                    strokeCount,
                    canvasWidth,
                    canvasHeight,
                    history,
                    historyIndex,
                    tools,
                    colors,
                    canUndo,
                    canRedo,
                    getCurrentToolLabel,
                    setTool,
                    setColor,
                    startDrawing,
                    draw,
                    stopDrawing,
                    undo,
                    redo,
                    clearCanvas,
                    saveImage,
                    showContextMenu,
                    handleKeyboard
                };
            }
        }).mount('#app');
    </script>
</body>
</html>
